<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>qq邮箱的表单部分</title>
  <link rel="stylesheet" href="mail.css">
</head>

<body style="display: flex;">

  <!-- qq邮箱的表单区域 -->
  <div class="form-box">

    <div class="form-title">
      <div class="disable-title">微信登录</div>
      <div>QQ登录</div>
    </div>

    <div class="form-main">
      <!-- 用div+input模拟更好看的输入框 -->
      <div class="input-div">
        <input class="input" type="text" placeholder="支持QQ号/邮箱/手机号">
      </div>

      <div class="input-div">
        <input class="input" type="text" placeholder="QQ密码">
      </div>

      <div class="mr-box">
        <label>
          <input type="checkbox">下次自动登录
        </label>
      </div>

      <div class="button-div mr-box">登 录</div>

      <div class="qr-div mr-box">
        扫码快捷登录
      </div>

      <div class="links-div">

        <div>
          <a href="#">忘了密码？</a>
        </div>

        <div>
          <a href="#">注册新账号</a>
        </div>

      </div>

    </div>

  </div>

</body>

</html>